<template>
	<div id="index" ref="appRef">
		<div class="bg">
			<dv-loading v-if="loading">Loading...</dv-loading>
			<div v-else class="host-body">
				<div class="d-flex jc-center">
					<dv-decoration-10 class="dv-dec-10" />
					<div class="d-flex jc-center">
						<dv-decoration-8 class="dv-dec-8" :color="decorationColors" />
						<div class="title">
							<span style="word-wrap: break-word" class="title-text">{{
								title
							}}</span>
							<dv-decoration-6
								class="dv-dec-6"
								:reverse="true"
								:color="['#50e3c2', '#67a1e5']"
							/>
						</div>
						<dv-decoration-8
							class="dv-dec-8"
							:reverse="true"
							:color="decorationColors"
						/>
					</div>
					<dv-decoration-10 class="dv-dec-10-s" />
				</div>

				<!-- 第二行 -->
				<div class="d-flex jc-between px-2">
					<div class="d-flex aside-width">
						<div @click="labeIndex = 0" class="react-left ml-4 react-l-s">
							<span class="react-before"></span>
							<span class="text">{{ subtitle[0] }}</span>
						</div>
						<div @click="labeIndex = 1" class="react-left ml-3">
							<span class="text">{{ subtitle[1] }}</span>
						</div>
					</div>
					<div class="d-flex aside-width">
						<div class="react-right bg-color-blue mr-3">
							<span class="text fw-b">{{ subtitle[2] }}</span>
						</div>
						<div class="react-right mr-4 react-l-s">
							<span class="react-after"></span>
							<span class="text">
								{{ timeInfo.dateYear }} {{ timeInfo.dateWeek }}
								{{ timeInfo.dateDay }}
							</span>
						</div>
					</div>
				</div>

				<div class="body-box">
					<!-- 第三行数据 -->
					<div v-if="!labeIndex" class="content-box">
						<div>
							<dv-border-box-12>
								<center-left1 @refresh="refreshCenter()"></center-left1>
							</dv-border-box-12>
						</div>
						<div>
							<dv-border-box-12
								><Center
									:isSetZero="isSetZero"
									:hour="hour"
									v-if="isRefresh"
								></Center>
							</dv-border-box-12>
						</div>
						<div>
							<dv-border-box-13>
								<center-right2 @setHour="setHour"></center-right2>
							</dv-border-box-13>
						</div>
					</div>
					<div v-if="labeIndex" class="show-box">
						<dv-border-box-11 :title="'试验田近期数据监控'">
							<div style="width: 100%; height: 900px">
								<Show></Show>
							</div>
						</dv-border-box-11>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<style lang="scss">
	.show-box {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>

<script setup>
	import { defineComponent, ref, reactive, onMounted, onUnmounted } from 'vue'
	import { formatTime } from '@/utils/index'
	import { WEEK } from '@/constant/index'
	import useDraw from '@/utils/useDraw'
	import { title, subtitle, moduleInfo } from '@/constant/index'
	import Center from '../center/index.vue'
	import CenterLeft1 from '../centerLeft1/index.vue'
	import CenterRight2 from '../centerRight2/index.vue'
	import Show from '../show/index.vue'
	import {
		getTimeStamp,
		record,
		realtimeApi,
		temperatureApi,
		PHApi,
		indooreApi,
		humidityApi,
	} from '../../apis/exampleApi'
	import request from '../../utils/request'
	import storage from '../../utils/storage'
	import { useRouter } from 'vue-router'

	const centerRef = ref()

	const isRefresh = ref(true)

	const isSetZero = ref(false)

	const hour = ref('24')

	// 标签页序号
	const labeIndex = ref(0)

	const router = useRouter()
	// * 颜色
	const decorationColors = ['#568aea', '#000000']
	// * 加载标识
	const loading = ref(true)
	// * 时间内容
	const timeInfo = reactive({
		setInterval: 0,
		dateDay: '',
		dateYear: '',
		dateWeek: '',
	})
	// * 适配处理
	const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()
	// 生命周期
	onMounted(() => {
		cancelLoading()
		handleTime()
		// todo 屏幕适应
		windowDraw()
		calcRate()
	})

	onUnmounted(() => {
		unWindowDraw()
		clearInterval(timeInfo.setInterval)
	})

	// methods
	// todo 处理 loading 展示
	const cancelLoading = () => {
		setTimeout(() => {
			loading.value = false
		}, 500)
	}

	// todo 处理时间监听
	const handleTime = () => {
		timeInfo.setInterval = setInterval(() => {
			const date = new Date()
			timeInfo.dateDay = formatTime(date, 'HH: mm: ss')
			timeInfo.dateYear = formatTime(date, 'yyyy-MM-dd')
			timeInfo.dateWeek = WEEK[date.getDay()]
		}, 1000)
	}

	const refreshCenter = () => {
		isRefresh.value = false
		setTimeout(() => {
			isRefresh.value = true
		}, 200)
	}

	const setHour = (val) => {
		hour.value = val
		isSetZero.value = ture
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/scss/index.scss';
</style>
